<template>
  <div class="dialog-footer dialog-footer-component">
    <el-button @click="$emit('cancel')">{{ cancelText }}</el-button>
    <confirm-button 
	  v-if="confirmText"
      :type="confirmType || themeType"
      :loading="loading"
      :text="confirmText"
      @click="$emit('confirm')"
    />
  </div>
</template>

<script setup>
import ConfirmButton from './ConfirmButton.vue'
import { useTheme } from '@/hooks/useTheme'
import { computed } from 'vue'

// 使用主题组合API获取当前主题按钮类型
const { themeType } = useTheme()

const props = defineProps({
  // 取消按钮文本
  cancelText: {
    type: String,
    default: '取消'
  },
  // 确认按钮文本
  confirmText: {
    type: String,
    default: '确认'
  },
  // 确认按钮类型
  confirmType: {
    type: String,
    default: 'primary'
  },
  // 确认按钮加载状态
  loading: {
    type: Boolean,
    default: false
  }
})

// 确保确认按钮文本有值
const buttonConfirmText = computed(() => props.confirmText || '确认')

defineEmits(['cancel', 'confirm'])
</script>

<style lang="scss" scoped>
.dialog-footer-component {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 10px 20px 20px !important;
}
</style> 